<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>烟雾特效</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        'use strict';
        //定义三维视图的主要类
        var webGlobe;
        //火焰烟雾粒子
        var fireObj, smokeObj;
        //地图初始化函数
        function init() {
            //构造三维视图类（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {
                terrainExaggeration: 1,
            });
            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器id）
            sceneManager.showPosition('coordinate_location');

            //构造第三方图层对象
            var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //加载天地图
            var tdtLayer = thirdPartyLayer.appendTDTuMap({
                //天地图经纬度数据
                url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
                //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
                token: "9c157e9585486c02edf817d2ecbc7752",
                //地图类型 'vec'矢量 'img'影像 'ter'地形
                ptype: "img"
            });

            //构造M3D模型层管理对象（视图）
            var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                viewer: webGlobe.viewer
            });
            //加载M3D地图文档（服务地址，配置参数）
            var {
                protocol,
                ip,
                port
            } = window.webclient;
            var landscapeLayer = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/ZondyModels`, {
                //是否自动定位到数据位置
                autoReset: false,
                //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量
                maximumScreenSpaceError: 8
            });

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            sceneManager.flyToEx(114.39969287363587, 30.46955973483767, {
                height: 139,
                heading: 140,
                pitch: -20,
                roll: 0
            });


            //初始化高级分析功能管理类
            var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({
                viewer: webGlobe.viewer
            });
            //粒子发射位置点
            let position = [114.40103, 30.4679, 12];
            //火焰与烟雾图片url
            let imageUrl1 = './static/data/effect/fire1.png';
            let imageUrl2 = './static/data/effect/smoke1.png';
            //添加烟雾粒子特效
            fireObj = advancedAnalysisManager.createStableParticle(imageUrl1, position, {
                emissionRate: 3,
                startScale: 1,
                endScale: 3
            });
            //添加烟雾粒子特效
            smokeObj = advancedAnalysisManager.createStableParticle(imageUrl2, position, {
                emissionRate: 35,
                startScale: 5,
                endScale: 8
            });

            var viewer = webGlobe.viewer;
            //开启计时
            viewer.clock.shouldAnimate = true;
            var scene = viewer.scene;
            //开启对数深度缓冲区
            scene.logarithmicDepthBuffer = true;

            //火焰烟雾特效初始参数
            var viewModel = {
                emissionRate: 35.0, //排放率
                particleLife: 1.2, //粒子生命
                speed: 2.0, //速度
                startScale: 5.0, //起始规模
                endScale: 8.0, //终止规模
                particleSize: 25.0 //图像尺寸
            };
            //火焰烟雾参数设置绑定UI
            Cesium.knockout.track(viewModel);
            var toolbar = document.getElementById('toolbar');
            Cesium.knockout.applyBindings(viewModel, toolbar);

            function subscribeParameter(name) {
                Cesium.knockout.getObservable(viewModel, name).subscribe(
                    function(newValue) {
                        if (name === 'emissionRate') {
                            //排放率
                            smokeObj.emissionRate = parseFloat(newValue);
                        }
                        if (name === 'particleSize') {
                            var particleSize = parseFloat(newValue);
                            /* Cesium.particleSystem.minimumImageSize.x = particleSize;
                             Cesium.particleSystem.minimumImageSize.y = particleSize;
                             Cesium.particleSystem.maximumImageSize.x = particleSize;
                             Cesium.particleSystem.maximumImageSize.y = particleSize; */
                            //图像尺寸
                            smokeObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize);

                        }
                        if (name === 'particleLife') {
                            smokeObj.particleLife = parseFloat(newValue);
                        }
                        if (name === 'speed') {
                            smokeObj.speed = parseFloat(newValue);
                        }

                        if (name === 'startScale') {
                            //起始规模
                            smokeObj.startScale = parseFloat(newValue);
                        }
                        if (name === 'endScale') {
                            //终止规模
                            smokeObj.endScale = parseFloat(newValue);
                        }
                    }
                );
                scene.requestRender();
            }
            //改变属性值时调用
            subscribeParameter('emissionRate');
            subscribeParameter('particleSize');
            subscribeParameter('particleLife');
            subscribeParameter('speed');
            subscribeParameter('startScale');
            subscribeParameter('endScale');
        }
    </script>
</head>

<body onload="init()">
    <div id="GlobeView"></div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
    <div class="message" id="toolbar" style="left: 10px; ">
        <table>
            <tbody>
                <tr>
                    <td>排放率(emissionRate)</td>
                    <td>
                        <input type="range" min="0.0" max="100.0" step="1" data-bind="value: emissionRate, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: emissionRate">
                    </td>
                </tr>

                <tr>
                    <td>图像尺寸(imageSize)</td>
                    <td>
                        <input type="range" min="2" max="60.0" step="1" data-bind="value: particleSize, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: particleSize">
                    </td>
                </tr>

                <tr>
                    <td>粒子生命(particleLife)</td>
                    <td>
                        <input type="range" min="0.1" max="30.0" step="1" data-bind="value: particleLife, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: particleLife">
                    </td>
                </tr>


                <tr>
                    <td>速度(speed)</td>
                    <td>
                        <input type="range" min="0.0" max="30.0" step="1" data-bind="value: speed, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: speed">
                    </td>
                </tr>

                <tr>
                    <td>起始规模(startScale)</td>
                    <td>
                        <input type="range" min="0.0" max="10.0" step="1" data-bind="value: startScale, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: startScale">
                    </td>
                </tr>

                <tr>
                    <td>终止规模(endScale)</td>
                    <td>
                        <input type="range" min="0.0" max="10.0" step="1" data-bind="value: endScale, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: endScale">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>